<html>
    <head>
        <meta charset="UTF-8">
        <title>Web sockets test</title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var ws;
            function ToggleConnectionClicked() {
                  
                    try {
                        ws = new WebSocket("ws://192.168.0.0:8000");//连接服务器        
                        ws.onopen = function(event){alert("已经与服务器建立了连接\r\n当前连接状态："+this.readyState);};
                        ws.onmessage = function(event){//alert("接收到服务器发送的数据：\r\n"+event.data);
                        document.getElementById("servercontent").innerHTML +=event.data+'\n';};
                        ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};
                        ws.onerror = function(event){alert("WebSocket异常！");btn.disabled=false;};
                    } catch (ex) {
                        alert(ex.message);    
                    }
                    var btn=document.getElementById("ToggleConnection");
                    btn.disabled=true;
            };
     
            function SendData() {
                try{
                    var content = document.getElementById("content").value;
                    if(content && content.trim().length!=0){
                        ws.send(content);
                    }else{
                        alert('请输入发送内容！');
                    }
                    
                }catch(ex){
                    alert(ex.message);
                }
            };
     
            function seestate(){
                alert(ws.readyState);
            }
           
        </script>
    </head>
    <body>
        <div>
            <div>聊天内容窗口</div>
        <textarea id="servercontent"  rows="20" cols="80" readonly="readonly"></textarea>
        </div>
        <br>
        <div>
       <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button>
       <br>
       <textarea id="content" rows="5" cols="40"></textarea>
       <br>
        <button id='ToggleConnection' type="button" onclick='SendData();'>发送</button><br /><br />
        <button id='ToggleConnection' type="button" onclick='seestate();'>查看状态</button><br /><br />
        </div>
    
    </body>
    </html>